<template>
  <div class="block">
    <Title
      minTitle="设备"
      title="网关列表"
      introduce="展示EUI、名称、状态等设备信息，可根据EUI.状态，和绑定时间等条件筛选具体的网关。"
    />
    <!-- Tab栏 -->
    <el-tabs
      type="border-card"
      v-model="activeName"
      class="gateway-tab"
      @tab-click="handleChangeTab"
    >
      <el-tab-pane label="所有设备" name="all"></el-tab-pane>
      <el-tab-pane label="LoRaWAN" name="LoRaWAN"></el-tab-pane>
      <el-tab-pane label="LoRaPP" name="LoRaPP"></el-tab-pane>
      <div class="search-block">
        <!-- 搜索 -->
        <el-form
          ref="form"
          :model="query"
          label-width="80px"
          style="width: 460px"
        >
          <!-- 在线状态 -->
          <div>
            <el-form-item label="在线状态:">
              <el-select
                v-model="query.online"
                placeholder="全部"
                style="width: 380px"
              >
                <el-option label="在线" value="true"></el-option>
                <el-option label="离线" value="false"></el-option>
                <el-option label="全部" value="all" selected></el-option>
              </el-select>
            </el-form-item>
          </div>
          <!-- EUI -->
          <div>
            <el-form-item label="EUI:">
              <el-input v-model="query.eui"></el-input>
            </el-form-item>
          </div>
          <!-- 绑定时间 -->
          <div>
            <el-form-item label="绑定时间:">
              <el-date-picker
                v-model="date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <el-button-group>
            <el-button
              type="primary"
              @click="onSubmit"
              icon="el-icon-search"
              size="mini"
              >搜索</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-delete"
              size="mini"
              @click="handleClear"
              >清除条件</el-button
            >
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-refresh"
              @click="handleRefresh"
              >刷新</el-button
            >
            <span class="search">搜索结果:{{ total }}</span>
          </el-button-group>
        </el-form>
      </div>
    </el-tabs>
    <!-- 表格数据 -->
    <el-table :data="gatewayList" border style="width: 100%" class="teble">
      <el-table-column type="index" label="序号" width="100"></el-table-column>
      <el-table-column prop="eui" label="EUI"></el-table-column>
      <el-table-column prop="name" label="设备名称"></el-table-column>
      <el-table-column prop="mhz" label="赫兹(Mhz)"></el-table-column>
      <el-table-column prop="online" label="在线状态">
        <template slot-scope="scope">
          {{ scope.row.online | onlineType }}
        </template>
      </el-table-column>
      <el-table-column prop="country" label="国家"></el-table-column>
      <el-table-column prop="agreement" label="组网协议类型"></el-table-column>
      <el-table-column prop="bTime" label="绑定时间">
        <template slot-scope="scope">
          {{ scope.row.bTime | formatDate }}
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 size-change:修改每一页的数量、current-change:当前页页码的变化、current-page:当前页的页码、
    page-sizes:每页有多少条的下拉框、page-size：一页默认的数据、layout:分页显示哪些配置项   -->
    <div class="pagination-block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.currPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Title from "@/components/Title.vue";
import { $gatewayList } from "@/api/index.js";

export default {
  name: "gateway",
  components: {
    Title,
  },
  data() {
    return {
      gatewayList: [],
      // 默认值
      activeName: "all",
      // 查询和分页传给后台的默认数据
      query: {
        currPage: 1,
        pageSize: 5,
        eui: "", //设备eui
        online: "all", //是否在线
        agreement: "all", //网组协议类型
        date: "", //搜索日子期间
      },
      date: [], // 插件选择的时间
      // 数据总数量
      total: 0,
    };
  },
  filters: {
    onlineType(value) {
      return value ? "在线" : "离线";
    },
    formatDate(date) {
      const d = new Date(date);
      const month = d.getMonth() + 1; //月份
      const day = d.getDate(); //日
      const hour = d.getHours(); //小时
      const minutes = d.getMinutes(); //分
      const seconds = d.getSeconds(); //秒
      return `${d.getFullYear()}-${month}-${day} ${hour}:${minutes}:${seconds}`;
    },
  },
  watch: {
    date(val) {
      if (val) {
        const d1 = val[0];
        const d2 = val[1];
        const time1 = d1 && d1.getTime();
        const time2 = d2 && d2.getTime();
        if (time1 && time2) {
          this.query.date = time1 + "-" + time2;
        } else {
          this.query.date = "";
        }
      } else {
        this.query.date = "";
      }
    },
  },
  created() {
    this.getGatewayList();
  },
  methods: {
    // tab栏切换
    handleChangeTab(value) {
      //获取tab栏的Name值
      this.query.agreement = value.name;
      this.getGatewayList();
    },
    // 搜索
    onSubmit() {
      this.query.currPage = 1;
      // 重新获取数据
      console.log(this.query);
      this.getGatewayList();
    },
    // 清除搜索条件
    handleClear() {
      this.query = {
        currPage: 1,
        pageSize: 5,
        eui: "", //设备eui
        online: "all", //是否在线
        agreement: "all", //网组协议类型
        date: "", //搜索日子期间
      };
      this.date = [];
      // 重新获取数据
      this.getGatewayList();
    },
    // 刷新页面
    handleRefresh() {
      this.$router.go(0);
    },
    // 需要将分页和查询的参数传给后台
    // 获取网管列表数据的函数
    getGatewayList() {
      $gatewayList(this.query).then((res) => {
        console.log(res);
        this.gatewayList = res.data.data;
        // 给总数量赋值
        this.total = res.data.total;
      });
    },
    // 修改分页的每页显示条数
    handleSizeChange(num) {
      this.query.pageSize = num;
      this.query.currPage = 1;
      // 重新获取数据
      this.getGatewayList();
    },
    // 修改当前页页码
    handleCurrentChange(num) {
      // 将当前页的页码赋值给currPage
      this.query.currPage = num;
      // 重新获取数据
      this.getGatewayList();
    },
  },
};
</script>

<style lang="scss" scoped>
.block /deep/ th div,
/deep/ td div {
  text-align: center;
}

.gateway-tab {
  margin-bottom: 10px;
}

.search-block div {
  margin-bottom: 10px;
}

.search {
  font-size: 12px;
  color: #797b7e;
  margin-left: 10px;
}
.pagination-block {
  padding: 20px 0;
  background-color: #ffffff;
  text-align: center;
  margin-bottom: 30px;
  .el-pagination {
    display: inline-block;
  }
}
</style>
